UserCSS - 將列表的標記改成FontAwesome圖示
/villagepump/箇条書きのバレットをFontAwesomeにするUserCSS
/scrapboxlab/箇条書きのバレットをFontAwesomeにするUserCSS
將無序列表和有序列表的marker改為FontAwesome的UserCSS
1
2
3
4
5
1. 1
2. 2
3. 3
4. 4
5. 5
無序列表
指定圖示
code:style.css
.line .indent-mark .dot::before {
display: block;
position: absolute;
top: -10px;
/* top: 3px; */
font-family: 'Font Awesome 5 Free';
content: '\f068'; /* 減號 */
font-size: 6px;
font-weight: 900;
color: #c9c9c9;　
}
@media screen and (max-width: 576px) {
.line .indent-mark .dot::before {
top: -10px;
}
}
清除原有 bullet
code:style.css
.line .indent-mark .dot {
background-color: transparent;
}
縮排 bullet 上色
code:style.css
.indent-markstyle*="width: 1.5em" .dot::before,
.indent-mark .dot:nth-child(6n+2)::before {
color: #EDAD0B;
}
.indent-markstyle*="width: 3em" .dot::before,
.indent-mark .dot:nth-child(6n+3)::before {
color: #C7243A;
}
.indent-markstyle*="width: 4.5em" .dot::before,
.indent-mark .dot:nth-child(6n+4)::before {
color: #932674;
}
.indent-markstyle*="width: 6em" .dot::before,
.indent-mark .dot:nth-child(6n+5)::before {
color: #3261AB;
}
.indent-markstyle*="width: 7.5em" .dot::before,
.indent-mark .dot:nth-child(6n+6)::before {
color: #009F8C;
}
.indent-markstyle*="width: 9em" .dot::before,
.indent-mark .dot:nth-child(6n+7)::before {
color: #c9c9c9;
}
有序列表
指定圖示
code:style.css
.line.number-list .dot {
display: list-item;
}
.line.number-list .dot::before {
position: inherit;
/* top: -11px; */
content: '\f292'; /* # */
/* font-size: 4px; *
font-size: 8px;
}
文字大小
code:style.css
/*
.line.number-list .c-0 + .dot::before {
font-size: 8px;
}
.line.number-list .c-1 + .dot::before {
font-size: 7px;
}
.line.number-list .c-2 + .dot::before {
font-size: 6px;
}
.line.number-list .c-3 + .dot::before {
font-size: 5px;
}
.line.number-list .c-4 + .dot::before {
font-size: 4px;
}
*/